<template>
  <div>
    <nav-header :headerTitle="'关注公众号'" :navBgColor="'#fff'"></nav-header>
    <section class="page">
      <div class="header">
        <img src="@/assets/images/gzh_banner@2x.png" alt />
        <div>关注BWRM</div>
        <p>专注人脉拓展，BWRM从关注这一刻开启！</p>
      </div>
      <div class="section">
        <div class="null82"></div>
        <div class="s-btn">
          <div class="content">
            <div class="task"></div>
            <span>二维码关注</span>
          </div>
        </div>
        <div class="null56"></div>
        <div class="s-ewma" @click="downEwm">
          <img
            data-type="1"
            :src="show.pubNumImgUrl?show.pubNumImgUrl:this.defaultImg(1)"
            @error="errorImg"
            alt
          />
          <div>下载二维码到相册</div>
        </div>

        <div class="null82"></div>
        <div class="s-btn">
          <div class="content">
            <div class="task"></div>
            <span>搜索关注</span>
          </div>
        </div>
      </div>
      <div class="null72"></div>
      <div class="footer">
        <div class="f-items">
          <div class="content">
            <div class="fi-btn">
              <div class="task"></div>
              <span>第一步</span>
            </div>
            <div class="fi-text">打开微信，点击微信页面的【+】，根据下拉再点击选项 “添加朋友”</div>
          </div>
        </div>
        <div class="f-items">
          <div class="content">
            <div class="fi-btn">
              <div class="task"></div>
              <span>第二步</span>
            </div>
            <div class="fi-text">在搜索框内输入 “BWRM平台” </div>
          </div>
        </div>
        <div class="f-items">
          <div class="content">
            <div class="fi-btn">
              <div class="task"></div>
              <span>第三步</span>
            </div>
            <div class="fi-text">点击 “关注” ，进入公众号了解每日更新。</div>
          </div>
        </div>
      </div>
      <div class="null56"></div>
    </section>
  </div>
</template>

<script>
import navHeader from "@/components/NavHeader";
import mixin from "@/utils/mixin";
export default {
  name: "publicFocus",
  mixins: [mixin],
  components: {
    navHeader
  },
  data() {
    return {
      show: {
        pubNumImgUrl: ""
      }
    };
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    init: function() {
      this.$http.post("soft/getWapConfig", {}).then(
        res => {  
          let that = this;
          let wapConfig = res.data ;  
          let srcArr = wapConfig.pubNumImgUrl;
          that.loadImg(srcArr, function(imgArr) {
            that.show.pubNumImgUrl = imgArr;
          });
        },
        err => {
          console.log(err);
        }
      );
      
    },
    downEwm() {
      let parmas = {
        imgUrl: [this.show.pubNumImgUrl]
      };
      this.$bridge.callHandler("downloadImage", parmas, res => {
        console.log(res);
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  margin-top: 86px;
  background-color: #ffffff;
  .null56 {
    width: 100%;
    height: 56px;
  }
  .null72 {
    width: 100%;
    height: 72px;
  }
  .null82 {
    width: 100%;
    height: 82px;
  }
  .header {
    width: 100%;
    height: 260px;
    position: relative;
    text-align: center;
    img {
      width: 100%;
      height: 100%;
    }
    div {
      font-size: 56px;
      font-family: PingFangSC-Semibold;
      font-weight: 600;
      color: rgba(255, 255, 255, 1);
      letter-spacing: 10px;
      position: absolute;
      top: 52px;
      width: 100%;
    }
    p {
      font-size: 32px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      text-shadow: 0px 2px 0px rgba(251, 201, 70, 0.48);
      position: absolute;
      top: 144px;
      width: 100%;
    }
  }
  .section {
    .s-btn {
      width: 272px;
      height: 42px;
      margin: auto;

      .content {
        position: relative;
        text-align: center;
        width: 100%;
        height: 100%;
        .task {
          opacity: 0.14;
          border-radius: 21px;
          background: rgba(255, 37, 37, 1);
          position: absolute;
          left: 0px;
          right: 0px;
          top: 0px;
          bottom: 0px;
        }
        span {
          font-size: 34px;
          font-family: PingFangSC-Medium;
          font-weight: bold;
          color: rgba(255, 37, 37, 1);
          width: 100%;
          position: absolute;
          left: 0px;
          top: -22px;
        }
      }
    }
    .s-ewma {
      width: 542px;
      height: 604px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.06);
      margin: auto;
      text-align: center;
      border-radius: 10px;
      img {
        width: 320px;
        height: 320px;
        margin-top: 64px;
        margin-bottom: 64px;
      }
      div {
        width: 440px;
        height: 72px;
        line-height: 72px;
        margin: auto;
        background: linear-gradient(
          115deg,
          rgba(244, 112, 66, 1) 0%,
          rgba(255, 37, 37, 1) 100%
        );
        border-radius: 36px;
        font-size: 30px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
      }
    }
  }
  .footer {
    .f-items {
      width: 100%;
      text-align: left;
      .content {
        padding: 32px;
      }
      .fi-btn {
        width: 160px;
        height: 56px;
        text-align: center;
        line-height: 56px;

        margin-bottom: 20px;
        position: relative;
        .task {
          opacity: 0.14;
          border-radius: 8px;
          background: rgba(255, 37, 37, 1);
          position: absolute;
          left: 0px;
          right: 0px;
          top: 0px;
          bottom: 0px;
        }
        span {
          font-size: 30px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: #ff2525;
          position: absolute;
          width: 100%;
          left: 0px;
        }
      }
      .fi-text {
        font-size: 30px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(48, 49, 51, 1);
        line-height: 48px;
      }
    }
  }
}
</style>
